import React, { useState } from "react";

function Demom() {
  let [list, setList] = useState([
    { username: "张三", finished: false },
    { username: "李四", finished: false },
    { username: "王五", finished: false },
  ]);

  const update = (item)=> {
    // 取反
    item.finished = !item.finished;
    console.log(list);
    setList([...list]);
  }

  return (
    <ul style={{ margin: "20px" }}>
      {list.map((item, index) => (
        <li key={index}>
          <span>{item.username}</span> 
          <span className="ml-10">{item.finished?'已完成':'未完成'}</span>
          <button className="ml-10" onClick={()=>{update(item)}}>修改</button>
        </li>
      ))}
    </ul>
  );
}

export default Demom;
